﻿@model Pageparkproject.Models.tblProject
@{
    ViewBag.Title = "Thiết kế nội thất " + Model.sProjectName;
    Layout = "~/Views/Shared/Layout.cshtml";
    <script src="~/Contents/Scripts/jquery.mCustomScrollbar.js"></script>
    <link href="~/Contents/Themes/jquery.mCustomScrollbar.css" rel="stylesheet" />
    <script src="~/Contents/Scripts/sliderengine/amazingslider.js"></script>
    <script src="~/Contents/Scripts/sliderengine/initslider-1.js"></script>
}
<script type="text/javascript">
    $(document).ready(function () {
        $('.icon-cross').click(function () {
            if($('.ppanel').hasClass('opened')){
                $('.ppanel').stop(true, true).animate({ 'margin-left': '-400px' });
                $(this).addClass('icon-arrowright');
                $('.ppanel').addClass('closed').removeClass('opened');
                $('.mCustomScrollBox').stop(true, true).fadeOut();
                $('#project-detail-name').stop(true, true).fadeOut();
            }else{
                $('.ppanel').stop(true, true).animate({ 'margin-left': '0px' });
                $(this).removeClass('icon-arrowright');
                $('.ppanel').addClass('opened').removeClass('closed');
                $('.mCustomScrollBox').stop(true, true).fadeIn();
                $('#project-detail-name').stop(true, true).fadeIn();
            }
        });
        
    })
    $(window).load(function () {
        $(".jspContainer").mCustomScrollbar({
            scrollButtons: {
                enable: true
            }
        });
    });
</script>
<div class="project-detail">
<article class="page">
    <div class="ppanel opened" style="margin-left: 0px;">
        <a href="javascript:" class="close no-ajaxy"><i class="icon-cross"></i></a>
        <a title="@ViewBag.nextTitle" href="@Url.Action("ProjectDetail", new { id = ViewBag.nextID })" class="next">Next Project</a>
        <header id="project-detail-name" style="-webkit-transition: all 0s ease; transition: all 0s ease; display: block; opacity: 1;">
            <h1>@Model.sProjectName</h1>
        </header>
        <div class="project-copy scrollpane" style="max-height: 300px; overflow: hidden; padding: 0px; -webkit-transition: all 0s ease; transition: all 0s ease; display: block; width: 390px; opacity: 1;">
            <div class="jspContainer" style="width: 390px; height: 300px;">
                <div class="jspPane" style="padding: 0px; top: 0px; width: 390px;">
                    @Html.Raw(Model.sDescription)
                </div>
            </div>
        </div>
        <div class="subnav">
            <span><a href="#">Related Projects</a></span>
            <!-- Share -->
            <div class="share clearfix">
                <a class="share_btn no-ajaxy" href="#">Share</a>
                <div class="share_box clearfix">
                    <ul>
                        <!-- Facebook -->
                        <li>
                            <a class="popup" href="#">Facebook</a>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- end share-->
        </div>
    </div>
</article>

<div id="slides">
    <div id="amazingslider-1" style="display:block;position:relative;margin:130px auto 32px;">@*display:block;position:relative;margin:93px auto 32px;*@
        <ul class="amazingslider-slides" style="display:none;">
            @foreach (var item in Model.tblImageProjects)
            {
                <li><img src="/Contents/Images/Project/@item.sImages" alt="@item.sTitle" /></li>
            }
        </ul>
        <ul class="amazingslider-thumbnails" style="display:none;">
            @foreach (var item in Model.tblImageProjects)
            {
                <li><img src="/Contents/Images/Project/@item.sImages" /></li>
            }
        </ul>
    </div>
</div>

    </div>